<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>充值</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/Cookies.js/1.2.1/cookies.js"></script>
    <script src="https://cdn.bootcss.com/OwlCarousel2/2.2.0/owl.carousel.min.js"></script>
    <link rel="dns-prefetch" href="https://wepay.weipinchu.com/"/>
    <link rel="stylesheet" href="https://ommdq027l.qnssl.com/static/release/1494780595539/vendor.css"/>
    <link rel="stylesheet" href="https://ommdq027l.qnssl.com/static/release/1494780595539/front.css"/>
    <link href="https://at.alicdn.com/t/font_apds0v8n2bhp8pvi.css" rel="stylesheet">
    <style>
        #first-recharge{
            margin-top: -10px;
        }
        .czimgbox{
            width: 100%;
            height: 150px;
            perspective: 400px;
        }
        .czimgbox img{
            width: 100%;
            height: 100%;
            animation: czimganimet .8s ease-in-out infinite;
        }
        @keyframes czimganimet{
            0%,100%{transform: translateZ(-20px);}
            50%{transform: translateZ(20px);}
        }
        <
        literal >
        body, html {
            -webkit-tap-highlight-color: transparent
        }

        body {
            overflow-x: hidden;
            background-color: #fbf9fe
        }

        .container {
            height: 100%;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch
        }

        .container > div {
            background-color: #fbf9fe
        }

        .hd {
            padding: 1.5em 0
        }

        .page_title {
            text-align: center;
            font-size: 24px;
            color: #3cc51f;
            font-weight: 400;
            margin: 0 15%
        }

        .page_desc {
            text-align: center;
            color: #888;
            font-size: 14px
        }

        .bd.spacing {
            padding: 0 15px
        }

        .home {
            padding-bottom: 30px
        }

        .button .page_title {
            color: #225fba
        }

        .button .bd {
            padding: 0 15px
        }

        .button .button_sp_area {
            padding: 10px 0;
            width: 60%;
            margin: 0 auto;
            text-align: justify;
            text-justify: distribute-all-lines;
            font-size: 0
        }

        .button .button_sp_area:after {
            display: inline-block;
            width: 100%;
            height: 0;
            font-size: 0;
            margin: 0;
            padding: 0;
            overflow: hidden;
            content: "."
        }

        .cell .page_title {
            color: #225fba
        }

        .cell .bd {
            padding-bottom: 30px
        }

        .dialog .bd, .toast .bd {
            padding: 120px 15px 0
        }

        .msg {
            background-color: #fff
        }

        .panel .bd {
            padding-bottom: 20px
        }

        .article {
            background-color: #fff
        }

        .article .page_title {
            color: #de7c23
        }

        .icons {
            background-color: #fff;
            text-align: center
        }

        .icons .page_title {
            color: #3e24bd
        }

        .icons .bd {
            padding: 30px 0;
            text-align: center
        }

        .icons .icon_sp_area {
            padding: 10px 20px;
            text-align: left
        }

        .icons i {
            margin: 0 5px 10px
        }

        .tabbar {
            height: 100%
        }

        .search_show {
            display: none;
            margin-top: 0;
            font-size: 14px
        }

        .search_show .weui_cell_bd {
            padding: 2px 0 2px 20px;
            color: #666
        }

        .icon {
            display: inline-block;
            width: 28px;
            height: 28px;
            vertical-align: middle
        }

        .icon_button {
            background: url(images/icon_nav_button.png) no-repeat;
            background-size: 28px 28px
        }

        .icon_cell {
            background: url(images/icon_nav_cell.png) no-repeat;
            background-size: 28px 28px
        }

        .icon_toast {
            background: url(images/icon_nav_toast.png) no-repeat;
            background-size: 28px 28px
        }

        .icon_dialog {
            background: url(images/icon_nav_dialog.png) no-repeat;
            background-size: 28px 28px
        }

        .icon_progress {
            background: url(images/icon_nav_progress.png) no-repeat;
            background-size: 28px 28px
        }

        .icon_msg {
            background: url(images/icon_nav_msg.png) no-repeat;
            background-size: 28px 28px
        }

        .icon_article {
            background: url(images/icon_nav_article.png) no-repeat;
            background-size: 28px 28px
        }

        .icon_actionSheet {
            background: url(images/icon_nav_actionSheet.png) no-repeat;
            background-size: 28px 28px
        }

        .icon_icons {
            background: url(images/icon_nav_icons.png) no-repeat;
            background-size: 28px 28px
        }

        .icon_panel {
            background: url(images/icon_nav_panel.png) no-repeat;
            background-size: 28px 28px
        }

        .icon_tab {
            background: url(images/icon_nav_tab.png) no-repeat;
            background-size: 28px 28px
        }

        .icon_search_bar {
            background: url(images/icon_nav_search_bar.png) no-repeat;
            background-size: 28px 28px
        }

        @-webkit-keyframes a {
            0% {
                -webkit-transform: translate3d(100%, 0, 0);
                transform: translate3d(100%, 0, 0);
                opacity: 0
            }
            to {
                -webkit-transform: translateZ(0);
                transform: translateZ(0);
                opacity: 1
            }
        }

        @keyframes a {
            0% {
                -webkit-transform: translate3d(100%, 0, 0);
                transform: translate3d(100%, 0, 0);
                opacity: 0
            }
            to {
                -webkit-transform: translateZ(0);
                transform: translateZ(0);
                opacity: 1
            }
        }

        @-webkit-keyframes b {
            0% {
                -webkit-transform: translateZ(0);
                transform: translateZ(0);
                opacity: 1
            }
            to {
                -webkit-transform: translate3d(100%, 0, 0);
                transform: translate3d(100%, 0, 0);
                opacity: 0
            }
        }

        @keyframes b {
            0% {
                -webkit-transform: translateZ(0);
                transform: translateZ(0);
                opacity: 1
            }
            to {
                -webkit-transform: translate3d(100%, 0, 0);
                transform: translate3d(100%, 0, 0);
                opacity: 0
            }
        }

        .enter, .leave {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1
        }

        .enter {
            -webkit-animation: a .2s forwards;
            animation: a .2s forwards
        }

        .leave {
            -webkit-animation: b .25s forwards;
            animation: b .25s forwards
        }

        <
        /
        literal >
    </style>
</head>
<body class=" has-footer-nav">
<include file="Public/menu"/>
<div class="container">
    <div class="cell">
        <div class="hd" style="padding: 1em 0 .8em">
            <h1 class="page_title">充值</h1>
        </div>
        <div class="bd">
            <div style="margin:0 10px;font-size:16px">
                <if condition="$now_money neq null">
                    您的余额: <span style="color:darkorange">{$now_money}</span> 书币
                    <else/>
                    <div class="weui_msg">
                        <div class="weui_text_area">
                            <h2 class="weui_msg_title text-danger">书币余额不足</h2>
                            <p class="weui_msg_desc">阅读本章需要 <b class="text-warning">{$chapter_money}</b> 书币，当前余额 <b
                                    class="text-warning">{$book_money}</b> 书币</p>
                        </div>
                    </div>
                </if>
            </div>
            <hr/>
            <div style="margin:10px 10px;font-size:16px;">
                选择充值金额 <span style="color:orangered">(1元=100阅读币)</span>
            </div>

            <div id="products-grid" class="products-grid clearfix">
                <div class="product-cell" style="display:none;">
                    <div class="product-item " data-pid="7" data-welth="1000">
                        <div class="product-welth"><span class="value">10</span>元</div>
                        <div class="product-info">
                            1000书币<br/>
                            多送0元
                        </div>

                    </div>
                </div>
                <div class="product-cell" style="display:none;">
                    <div class="product-item " data-pid="8" data-welth="1000">
                        <div class="product-welth"><span class="value">20</span>元</div>
                        <div class="product-info">
                            2000书币<br/>
                            多送0元
                        </div>

                    </div>
                </div>

                <div class="product-cell">
                    <div class="product-item " data-pid="4" data-welth="3000">
                        <div class="product-welth"><span class="value">30</span>元</div>
                        <div class="product-info">
                            3000书币<br/>
                            多送0元
                        </div>

                    </div>
                </div>
                <div class="product-cell">
                    <div class="product-item active" data-pid="3" data-welth="5000">
                        <div class="product-welth"><span class="value">50</span>元</div>
                        <div class="product-info">
                            5000+3000书币<br/>
                            多送30元
                        </div>

                        <i class="iconfont icon-hot"></i>
                    </div>
                </div>
                <div class="product-cell">
                    <div class="product-item" data-pid="2" data-welth="10000">
                        <div class="product-welth"><span class="value">100</span>元</div>
                        <div class="product-info">
                            10000+8000书币<br/>
                            多送80元
                        </div>

                        <i class="iconfont icon-hot"></i>
                    </div>
                </div>
                <div class="product-cell">
                    <div class="product-item " data-pid="1" data-welth="20000">
                        <div class="product-welth"><span class="value">200</span>元</div>
                        <div class="product-info">
                            20000+20000书币<br/>
                            多送200元
                        </div>

                    </div>
                </div>
                <div class="product-cell" style="">
                    <div class="product-item " data-pid="6" data-welth="0">
                        <div class="product-welth">
                            <span class="value"><i class="fa fa-diamond" style="color:goldenrod"></i> 年费VIP会员<br/>(365元)</span>
                        </div>
                        <div class="product-info">
                            每天1元, 全年免费看
                        </div>
                    </div>
                </div>
            </div>

            <p class="weui_btn_area" style="margin-top:20px">
                <a id="btn-pay-confirm" href="javascript:;" class="weui_btn weui_btn_primary">确认充值</a>
                <input type="hidden" id="open_id" value="{$open_id}"/>
        </div>

        </p>
    </div>
    <div id="first-recharge" class="app_body_banner czimgbox">
        <img src="/Public/attached/other/czimg.jpg"/>
    </div>
</div>
</div>

<script>
    $(function () {
        var articleId = null;
        var returnUrl = '';
        var tradeType = '';
        var submitting = false;
        var open_id = $("#open_id").val();

        $('#products-grid .product-item').click(function () {
            $('#products-grid .product-item').removeClass('active');
            $(this).addClass('active');
        });

        $('#btn-pay-confirm').click(function () {
            if (submitting) {
                return false;
            }

            submitting = true;

            var productId = $('#products-grid .product-item.active').attr('data-pid');
            var url = 'http://qikaism.cn/Home/User/pay?id=' + productId + "&open_id=" + open_id;

            if (articleId) {
                url += '&aid=' + articleId;
            }
            if (tradeType) {
                url += '&trade_type=' + tradeType;
            }
            if (returnUrl) {
                url += '&return=' + encodeURIComponent(returnUrl);
            }

            location.href = url;
        })

        $('#first-recharge').click(function(){
            if (submitting) {
                return false;
            }

            submitting = true;

            var url = 'http://qikaism.cn/Home/User/pay?id=12' +  "&open_id=" + open_id;
            if (articleId) {
                url += '&aid=' + articleId;
            }
            if (tradeType) {
                url += '&trade_type=' + tradeType;
            }
            if (returnUrl) {
                url += '&return=' + encodeURIComponent(returnUrl);
            }

            location.href = url;
        })

    })
</script>

<script src="https://cdn.bootcss.com/jquery-weui/0.8.2/js/jquery-weui.min.js"></script>

<div style="display:none">
    <script src="https://s95.cnzz.com/z_stat.php?id=1260438811&web_id=1260438811" language="JavaScript"></script>
</div>

</body>
</html>
